<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-bottom: 0">
            <el-form-item label="审核状态">
                <el-select v-model="searchForm.examstate" placeholder="请选择审核状态 ">
                    <el-option v-for="bran in statess" :label="bran.examname" :value="bran.examstate"></el-option>
                </el-select>
            </el-form-item>
            <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    size="small"
                    format="yyyy 年 MM 月 dd 日 HH 小时 mm 分钟 ss 秒"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOption"
                    @change="dateFormat">
            </el-date-picker>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="qkSearch">清空查询</el-button>
            </el-form-item>
        </el-form>
        <div style="display: inline-block">
            <a href="javascript:;"  title="刷新" class="refresh" @click="refresh()"><el-button type="success">刷新</el-button></a>
        </div>
        <!--        商家入驻审核界面-->

        <el-table
                ref="multipleTable"
                :data="outLibraryTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="审核编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="shopname"
                    label="商家名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="shoptel"
                    label="联系方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="btname"
                    label="产品类型"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店铺名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="branchdescrible"
                    label="店铺描述"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="店铺地址"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="settledtime"
                    label="提交时间"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="驳回理由"
                    width="120"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="examstate"
                    label="审核状态"
                    width="120">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-button type="warning" size="small" v-if="scope.row.examstate == 1">待审核</el-button>
                        <el-button type="success " size="small" v-if="scope.row.examstate == 2">审核通过</el-button>
                        <el-button type="danger" size="small" v-if="scope.row.examstate == 3">审核驳回</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="详情"
                    width="120">
                <template slot-scope="scope">
                    <el-button type="primary" @click="outLibraryGoodsForm(scope.row)">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <!--        //点击详情获取弹窗  -->
        <el-dialog
                title="商家详细信息"
                :visible.sync="dialogTableVisible"
                style="width: 100%">
            <el-table :data="gridData" max-height="300">
                <el-table-column property="goodsid" label="商品id"></el-table-column>

                <el-table-column  property="shopurl" label="店铺图片" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsUrl" width="50px" height="20px">
                    </template>
                </el-table-column>
                <!--                <el-table-column property="xid" label="出库编号" width="100"></el-table-column>-->
                <el-table-column property="personcardurl" label="身份证" width="100"></el-table-column>
                <el-table-column property="businesslicenseurl" label="营业执照"></el-table-column>
                <el-table-column property="coaurl" label="经营许可证"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "AuditInformation",
        data(){
            return{
                outLibraryTableData:[],
                //当前页码
                currentPage: 1,
                pageSizes:[5,10,15,20],
                pageSize:5,
                total:0,

                //点击通过获取到的数据和其它必须数据
                outLibraryTableDatas:[],
                //获取弹出层详细信息
                gridData:[],
                dialogTableVisible:false,

                //存储模糊查询信息
                searchForm: {},
                //日期时间选择器
                value1:'',
                startTime:'',
                endTime:'',
                statess:[
                    {"examstate":1,"examname":"待审核"},
                    {"examstate":2,"examname":"审核通过"},
                    {"examstate":3,"examname":"审核驳回"}
                ],
                pickerOption: { // 自定义周期快捷选项
                    shortcuts: [{
                        text: '最近一周',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }, {
                        text: '最近一个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }, {
                        text: '最近三个月',
                        onClick: (picker => {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            //this.searchChangeDate();
                        })
                    }],
                    //禁用当天之后的时间(若要禁用当天之前的时间则)
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
            }

        },
        created() {

            this.inintFindAll()
        },
        methods: {
            inintFindAll(){
                this.$http.post("/settled/settledlibrary/findAllSettled?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(result => {
                    console.log(result)
                    this.outLibraryTableData = result.data.data.list
                    this.total = result.data.data.total
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //分页操作
            handleSizeChange(val) {
                console.log("每页"+ val+"条");
                this.pageSize = val;
                this.inintFindAll();
            },
            handleCurrentChange(val) {
                console.log("当前页:"+val);
                this.currentPage = val;
                this.inintFindAll();
            },
            //点击详情信息获取数据并显示弹出层
            outLibraryGoodsForm(row){
                sessionStorage.setItem("row",row)
                console.log(row)
                this.$router.push({
                    name:"QualificationReview",
                    params: { row: row }
                })
            },
            //刷新当前页面
            refresh(){
                //this.$router.go(GoodsShipment.jsp);
                //或
                window.location.reload()
            },
            fanhui(){
                this.$router.push("/qr")
            },
            //模糊查询操作
            onSearch(){
                this.currentPage = 1;
                this.inintFindAll()
            },
            // 清空模糊查询
            qkSearch(){
                this.searchForm = {}
                this.value1=''
                this.startTime=''
                this.endTime=''
                this.inintFindAll()
            },
            dateFormat(picker) {
                if (picker != null) {
                    this.searchForm.startTime = picker[0].toString();
                    this.searchForm.endTime = picker[1].toString();
                }
            },

        }
    }
</script>

<style scoped>

</style>